Mit neuster Allrounderversion mühe!
8 Jahre 8 Monate her #2510
von Matthias
Matthias antwortete auf Mit neuster Allrounderversion mühe!
Hab mir nun mal kurz FF und Firebug besorgt. Ich persönlich bevorzuge ja die Entwicklertools der anderen Browser (Chrome, IE, Edge).
Wie bei den anderen Browsern und deren Entwicklertools auch, kann man nicht alle HTML-Elemente auf der Seite auswählen. Dies trifft immer dann zu, wenn diese genauso groß sind, wie deren Kindelemente. Allerdings kann man diese Elemente im HTML-Code anklicken, dann zeigt der Firebug die auch an
.
Wie ich in einem früheren Post schon schrieb, hat der Header einen margin-bottom (15px). Da dieser genauso hoch ist wie der Inhalt, kann man mit der Maus noch so viel drüber fahren. Allerdings kann man ihn am weißen Rand links bzw. rechts des Banners anklicken.
Der Absatz mit dem Banner beinhaltet nur das Banner und ist genauso groß. Dieser muss über den HTML-Code anvisiert werden :S . Auch dieser hat einen margin-bottom (0.65em). Damit die restlichen Absätze den behalten, würde ich raten dies mit einem style-Attribut im Absatz selber zu regeln oder auf diesen zu verzichten und nur das Bild einzubinden.
Der restliche Raum dazwischen kommt von der NavBar. Diese ist bei breiteren Fenstern nicht sichtbar, scheint aber trotzdem einen Einfluss zu haben. Auch diese hat einen margin-bottom (1.3em).
Ich habe mir mal deine custom.less angeschaut:
somit bleibt folgender Code über (mit dem neuen, wenn der Absatz selber formatiert/entfernt wird):
Ich hoffe das hilft weiter.
Wie bei den anderen Browsern und deren Entwicklertools auch, kann man nicht alle HTML-Elemente auf der Seite auswählen. Dies trifft immer dann zu, wenn diese genauso groß sind, wie deren Kindelemente. Allerdings kann man diese Elemente im HTML-Code anklicken, dann zeigt der Firebug die auch an
.Wie ich in einem früheren Post schon schrieb, hat der Header einen margin-bottom (15px). Da dieser genauso hoch ist wie der Inhalt, kann man mit der Maus noch so viel drüber fahren. Allerdings kann man ihn am weißen Rand links bzw. rechts des Banners anklicken.
Der Absatz mit dem Banner beinhaltet nur das Banner und ist genauso groß. Dieser muss über den HTML-Code anvisiert werden :S . Auch dieser hat einen margin-bottom (0.65em). Damit die restlichen Absätze den behalten, würde ich raten dies mit einem style-Attribut im Absatz selber zu regeln oder auf diesen zu verzichten und nur das Bild einzubinden.
Der restliche Raum dazwischen kommt von der NavBar. Diese ist bei breiteren Fenstern nicht sichtbar, scheint aber trotzdem einen Einfluss zu haben. Auch diese hat einen margin-bottom (1.3em).
Ich habe mir mal deine custom.less angeschaut:
- die Ecken heißen Ribbons und lassen sich im backend deaktivieren :woohoo:
- du musst Eigenschaften, die du nicht ändern willst auch nicht überschreiben, nur weil sie zusammen mit einer Eigenschaft, die du überschrieben haben möchtest zusammen definiert worden sind. Es wird immer nur die eine Eigenschaft überschrieben und nicht die gesamte Regel
- achte auf die Media-Queries, denn sonst überschreibst du auch Regeln, die du haben willst. Ich schätze mal, es war nicht deine Absicht, dass Menü bei schmaleren Fenstern unbenutzbar zu machen :S
somit bleibt folgender Code über (mit dem neuen, wenn der Absatz selber formatiert/entfernt wird):
Code:
@charset "utf-8";
/*Schule Waldegg, 2016*/
/*keine Schatten in Content 7968*/
/* keine Schatten bei den Modulen */
.shadow-left,
.shadow-right {
display: none;
}
#topmenu ul.menu {
/*kein Strich in der Navi 7726*/
> li {
a, span.separator {
border: none;
color: #000000; /* dass sollte man im Backend ändern können (Dropdown Menu Colors -> ul li a font) */
}
}
/*keine Ränder bei Navi 7685*/
background-color: #fb95b; /* hier fehlt ein Zeichen im Farb-Code; dass sollte man im Backend ändern können (Dropdown Menu Colors -> ul background) */
border: none;
li {
/*damit auch letzter Strich in Navi weggeht 7696*/
border-right: none; /* 0px = none */
/* keinen Schatten beim Text im Menu */
a, ul li a {
text-shadow: none;
}
}
ul.nav-child {
/*zweiter Menupunkt anpassen, mit em runterschieben*/
background-color: none;
border: none;
border-radius: 0px;
padding: 0px;
top: 3.5em;
width: 200px;
/*damit zweiter Menupunkt hell wird 7777*/
li {
a, span.separator {
width: 180px;
border: none;
border-color: #f7d69e; /* da alle 4 gleich, alle in eine Eigenschaft; dass sollte man im Backend ändern können (Dropdown Menu Colors -> ul li ul li a border-...) ist angesichts border: none sinnlos */
background-color: #f7d69e; /* dass sollte man im Backend ändern können (Dropdown Menu Colors -> ul li a font) */
}
}
}
}
/* Schatten in der Ueberschrift der Modulen ausschalten */
#leftcol h3.moduleh3,
#rightcol h3.moduleh3 {
text-shadow: none;
}
/* "Logo" -> Headermodule 1 verschieben 8589 */
#header {
background-color: none;
border-top: none; /* da kein border-bottom ginge auch border: none; */
border-left: none;
border-right: none;
margin-bottom: 0px; /* habe ich neu hinzugefügt */
}
/* Logo -> Headermodule 1 verschieben 8584 */
#header_container {
padding-top: 0px;
}
/* NavBar im breiten Fenster vollständig entfernen */
@media (min-width: @minDesktopWidth) {
.navbar {
display: none;
}
}
Ich hoffe das hilft weiter.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 8 Monate her - 8 Jahre 8 Monate her #2511
von Bea
Bea antwortete auf Mit neuster Allrounderversion mühe!
Lieber Matthias
Und ob mir das weiterhilft!!!! Habe bei deinem Code ca. Zeile 68 den margin-bottom: -8px statt auf 0 eben auf diese minus 8 gesetzt und nun ist die Navi bündig beim Logo!! Deine Erklärungen im Code sind genial. Werde mir das jetzt im Backend grad mal genau anschauen.
Das hier "hat der Header einen margin-bottom (15px)" habe ich eben nie gesehen! Auch das mit diesem media Zeugs macht mir noch Bauchweh. Ist schon anders, als die vorherigen Versionen. Natürlich wollte ich das bei schmalen Fenster nicht verschlechtern. Braucht wohl jetzt einfach Zeit bei mir, das zu kapieren.
Und ja, klar hast du recht und man sollte wohl in die custom.less nur das nötigste schreiben. Aber so schön zusammenfassen wie du kann ich das leider noch nicht
Darum nimm ich meist den ganze Code rüber. Werde es mal anders probieren.
Jedenfalls herzlichen Dank! Toller Service! Hoffe, ich komme nun selber etwas weiter. Muss ja noch einiges anpassen, sei es farblich oder dass es überhaupt passt.
Nachtrag noch wegen dem Code z.B. im Chrome anschauen: Für mich total unübersichtlich. Bin mir wohl einfach den FF zu sehr gewohnt. Werde es aber auch mal im IE probieren. Edge habe ich nicht.
Und ob mir das weiterhilft!!!! Habe bei deinem Code ca. Zeile 68 den margin-bottom: -8px statt auf 0 eben auf diese minus 8 gesetzt und nun ist die Navi bündig beim Logo!! Deine Erklärungen im Code sind genial. Werde mir das jetzt im Backend grad mal genau anschauen.
Das hier "hat der Header einen margin-bottom (15px)" habe ich eben nie gesehen! Auch das mit diesem media Zeugs macht mir noch Bauchweh. Ist schon anders, als die vorherigen Versionen. Natürlich wollte ich das bei schmalen Fenster nicht verschlechtern. Braucht wohl jetzt einfach Zeit bei mir, das zu kapieren.
Und ja, klar hast du recht und man sollte wohl in die custom.less nur das nötigste schreiben. Aber so schön zusammenfassen wie du kann ich das leider noch nicht
Darum nimm ich meist den ganze Code rüber. Werde es mal anders probieren.Jedenfalls herzlichen Dank! Toller Service!
Hoffe, ich komme nun selber etwas weiter. Muss ja noch einiges anpassen, sei es farblich oder dass es überhaupt passt. Nachtrag noch wegen dem Code z.B. im Chrome anschauen: Für mich total unübersichtlich. Bin mir wohl einfach den FF zu sehr gewohnt. Werde es aber auch mal im IE probieren. Edge habe ich nicht.
Letzte Änderung: 8 Jahre 8 Monate her von Bea.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 8 Monate her #2512
von Matthias
Matthias antwortete auf Mit neuster Allrounderversion mühe!
Bei größeren Zoom-Stufen ist dort noch ein weißer Rand unter dem Banner. Dies liegt daran, dass das margin-bottom: -8px im Header nur die Symptome bekämpft. Wie ich in einem früheren Post schon erwähnte, besteht dein Headermodule aus folgendem Code:
Ein weiterer weißer Rand kommt durch das min-height: 120px; vom Header zustande, da bei schmaleren Fenstern der Header immer kleiner wird. Irgendwann bleibt die Höhe dann konstant, der freie Platz wird weiß.
Es gibt übrigens kein background-color: none;. Es gibt allerdings background-color: transparent;.
LESS bietet des Weiteren die Möglichkeit Regeln zu verschachteln, wie ich es in meinem letzten Post auch getan habe, was einem das mehrmalige wiederholen eines Pfades abnimmt :woohoo: .
Des Weiteren kann man mit
folgenden Code erhalten:
Dies ist analog auch für die anderen Ecken und alle zusammen möglich 
.
Genaueres unter: github.com/joomla/joomla-cms/blob/stagin...ixins.less#L204-L249 .
Das Problem ist, wenn man den ganzen Code mit rüber nimmt, kann man leicht Regeln überschreiben, die man nicht überschreiben möchte, die aber die gerade kopierte Regel überschreiben. Des Weiteren müllt das die Datei nur voll und macht sie unübersichtlich :sick: .
Code:
<p> <!-- dies ist der thematisierte Absatz. Er erzeugt einen margin-bottom: 0.65em. Dies sind bei Schriftgröße 13 8.45px. Du solltest lieber diesem Absatz ein style="margin-bottom: 0px;" hinzufügen oder ihn entfernen, anstatt dem Header -8px margin-bottom zu verpassen. -->
<img alt="logoStart" src="/cms/images/banners/logoStart.png">
</p>
Ein weiterer weißer Rand kommt durch das min-height: 120px; vom Header zustande, da bei schmaleren Fenstern der Header immer kleiner wird. Irgendwann bleibt die Höhe dann konstant, der freie Platz wird weiß.
Es gibt übrigens kein background-color: none;. Es gibt allerdings background-color: transparent;.
LESS bietet des Weiteren die Möglichkeit Regeln zu verschachteln, wie ich es in meinem letzten Post auch getan habe, was einem das mehrmalige wiederholen eines Pfades abnimmt :woohoo: .
Des Weiteren kann man mit
Code:
.border-top-right-radius(0px);
Code:
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
.Genaueres unter: github.com/joomla/joomla-cms/blob/stagin...ixins.less#L204-L249 .
Das Problem ist, wenn man den ganzen Code mit rüber nimmt, kann man leicht Regeln überschreiben, die man nicht überschreiben möchte, die aber die gerade kopierte Regel überschreiben. Des Weiteren müllt das die Datei nur voll und macht sie unübersichtlich :sick: .
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 8 Monate her #2513
von Bea
Bea antwortete auf Mit neuster Allrounderversion mühe!
Matthias, dein Wissen einfach ein paar Ligen zu hoch für mich WIE füge ich das mit dem Style hinzu? Meinst du im html-Code im Headermodul, oder muss das ins Custom.less???
Das mit dem Background-color none habe ich geändert. War einfach froh, dass der Hintergrund weg war. Ich nehme die Befehle die ich kenne.
Dir müssen dabei wohl fast die Haare zu Berge stehen, grins
Und warum weisst du das, dass bei Schrift von 13 0.65em ist? Erfahrungswert oder gibts da Regeln?
Und den Hinweis mit dem Border verstehe ich nicht ganz: Ist ja immer so im Template aufgeführt. Meinst du, dass ich was entfernt habe, das nicht gut war?
Bin jedenfalls wahnsinnig froh über deine Hilfe und deine Imputs! Habe bereits wieder einiges gelernt. Auch, dass es sich lohnt, mal die Seite gezoomt anzusehen
Herzlichen Dank.
WIE füge ich das mit dem Style hinzu? Meinst du im html-Code im Headermodul, oder muss das ins Custom.less???Das mit dem Background-color none habe ich geändert. War einfach froh, dass der Hintergrund weg war. Ich nehme die Befehle die ich kenne.
Dir müssen dabei wohl fast die Haare zu Berge stehen, grinsUnd warum weisst du das, dass bei Schrift von 13 0.65em ist? Erfahrungswert oder gibts da Regeln?
Und den Hinweis mit dem Border verstehe ich nicht ganz: Ist ja immer so im Template aufgeführt. Meinst du, dass ich was entfernt habe, das nicht gut war?
Bin jedenfalls wahnsinnig froh über deine Hilfe und deine Imputs! Habe bereits wieder einiges gelernt. Auch, dass es sich lohnt, mal die Seite gezoomt anzusehen
Herzlichen Dank. Bitte Anmelden oder Registrieren um der Konversation beizutreten.
8 Jahre 8 Monate her #2515
von Bea
Bea antwortete auf Mit neuster Allrounderversion mühe!
Danke für die Links! Das mit dem Headermodul habe ich nun gelöst: Jedesmal wenn ich mit dem JCE gespeichert habe, hats ein <p> fabriziert. Ohne den Editer hats es richtig gespeichert. Habe nun den JCE umgestellt und wieder was dazugelernt
Im Momement knorze ich grad noch an einer imagemap Das werde ich aber auch noch lösen. Habs schon mal geschafft. Danach lese ich dann deine Tipps mal nach.
Im Momement knorze ich grad noch an einer imagemap
Das werde ich aber auch noch lösen. Habs schon mal geschafft. Danach lese ich dann deine Tipps mal nach. Bitte Anmelden oder Registrieren um der Konversation beizutreten.
Ladezeit der Seite: 0.234 Sekunden